<template>
	<view class="content">
		<view class="searchBar_">
			<uni-search-bar radius="100" @confirm="search" @input="input" @cancel="cancel" />
			<!-- <view class="search-result">
				<text class="search-result-text">当前输入为：{{ searchVal }}</text>
			</view> -->
		</view>
		<view class="tabs">
			<liuyuno-tabs :tabData="['个性推荐', '课程', '微专业']" :activeIndex="activeIndex" @tabClick="tabClick($event, '固定item宽度')" />
		</view>
		<view v-if="selected == 0 ">
			<view class="section1-image">
				<image src="https://img3.mukewang.com/5ff279bd0001c05b17920764.jpg" mode="widthFix"></image>
				<view class="hot">
					<view class="title">
						<custom-icons color="#d81e06" size="18" type="huo" /><text>今日热门</text>
					</view>
					<ul>
						<li>互联网是怎么跟广告业抢饭吃的</li>
						<li>中国哪个姓氏最厉害</li>
					</ul>
				</view>
			</view>
			<view class="devider">

			</view>

			<view>
				<uni-list>
					<uni-list-item @click="pageTo('/pages/home/home-article')" :clickable="true" title="人家设计这个才叫loading，你设计的那个顶多叫菊花"
					 note="等待界面的设计最初的时候并不走心，现在已经花样百出，本文带你一起看看。" thumb="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1464284496,1576546537&fm=26&gp=0.jpg"
					 thumb-size="lg" />
					<uni-list-item @click="pageTo('/pages/home/home-article')" :clickable="true" title="人家设计这个才叫loading，你设计的那个顶多叫菊花"
					 note="等待界面的设计最初的时候并不走心，现在已经花样百出，本文带你一起看看。" thumb="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fim5.tongbu.com%2Ftbnews%2F202009%2Fb5d85cb3-0.png%3Fw%3D480%2C343%26amp%3Bb%3D166&refer=http%3A%2F%2Fim5.tongbu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612407618&t=5cf92a58f31bc8ab521f0ee112f36e97"
					 thumb-size="lg" />
					<uni-list-item @click="pageTo('/pages/home/home-article')" :clickable="true" title="人家设计这个才叫loading，你设计的那个顶多叫菊花"
					 note="等待界面的设计最初的时候并不走心，现在已经花样百出，本文带你一起看看。" thumb="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=199579668,662169770&fm=26&gp=0.jpg"
					 thumb-size="lg" />
				</uni-list>
			</view>

			<view class="devider devider-lg ">
				<view class="title2">
					<custom-icons color="#1296db" size="20" type="book" />
					<text>“绘画”值得学的课</text>
					<text></text>
				</view>
			</view>
			<view class="devider ">

			</view>
			<view>
				<view>
					<uni-card :isShadow="true" mode="notitle">
						<view>
							<view class="image-box">
								<image class="image" mode="aspectFill" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" />
							</view>
							<view class="content-box1">
								<text>汤小圆的手绘POP插画完整详解</text>
							</view>
							<view class="content-box2">
								<text>汤小圆 共54个课时</text>
							</view>
							<view class="content-box3">
								<text class="content-box-text">分别从字体、构图和技法三方面完整介绍手绘POP插画的绘制方法。</text>
							</view>
						</view>
					</uni-card>
				</view>
			</view>
		</view>

		<view v-if="selected == 1 ">
			<view class="section1-image">
				<image src="https://img3.mukewang.com/5ff279bd0001c05b17920764.jpg" mode="widthFix"></image>
			</view>
			<view class="Jclass">
				<h4>精选好课</h4>

			</view>
			<view>
				<div class="one">
					<div class="picture">
						<image src="../../../static/img/1609902606(1).jpg" class="picu"></image>
						<p style="color:#808080;font-size: 13px;">跟简七学理财</p>
						<p style="font-size: 8px;"><span style="color: #4CD964;">★★★★☆</span>&nbsp4.8分&nbsp&nbsp10143人学过</p>
						<p style="font-size: 13px;color: red;">￥398.00</p>
					</div>
					<div class="picture">
						<image src="../../../static/img/1609902623(1).jpg" class="picu"></image>
						<p style="color:#808080;font-size: 13px;">轻松手绘，提升竞争力</p>
						<p style="font-size: 8px;"><span style="color: #4CD964;">★★★☆☆</span>&nbsp4.8分&nbsp&nbsp9703人学过</p>
						<p style="font-size: 13px;color: red;">￥199.00</p>
					</div>
					<div class="picture">
						<image src="../../../static/img/1609902643(1).jpg" class="picu"></image>
						<p style="color:#808080;font-size: 13px;">和阿文一起学信息图表</p>
						<p style="font-size: 8px;"><span style="color: #4CD964;">★★★★★</span>&nbsp4.8分&nbsp&nbsp11123人学过</p>
						<p style="font-size: 13px;color: red;">￥998.00</p>
					</div>
					<div class="picture">
						<image src="../../../static/img/1609902667(1).jpg" class="picu"></image>
						<p style="color:#808080;font-size: 13px;">ios逆向与安全</p>
						<p style="font-size: 8px;"><span style="color: #4CD964;">★★☆☆☆</span>&nbsp4.8分&nbsp&nbsp10人学过</p>
						<p style="font-size: 13px;color: red;">￥98.00</p>
					</div>
					<div>
						<image src="../../../static/img/img34215f0b587b48.png" style="margin-left: 20px;width: 90%;"></image>
						<p style="color:#808080;font-size: 13px; margin-left: 20px;">阿文新课：你懂个P，超人气课程</p>
						<p style="font-size: 8px;"><span style="color: #4CD964; margin-left: 20px;">★★★★★★</span>&nbsp4.8分&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp29102人学过</p>
						<p style="font-size: 13px;color: red; margin-left: 20px;">￥198.00</p>
					</div>
				</div>
			</view>
			<view>
				<image src="../../../static/img/shuaxin.png" style="width: 25px; height: 25px; margin-left: 40%;"></image>
				<span style="position: relative;top: -6px;">换一批</span>
			</view>
		</view>

		<view class="micro" v-else-if="selected==2">
			<micro></micro>
		</view>
	</view>
</template>

<script>
	import micro from "@/components/micro/micro.vue";
	import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
	import customIcons from "@/components/custom-icons/custom-icons.vue";

	export default {
		components: {
			liuyunoTabs,
			customIcons,
			micro
		},
		data() {
			return {
				searchVal: '',
				activeIndex: 0,
				selected: 0,
				defaultConfig: {
					// 要显示的key
					key: 'name',
					// 字体大小 px
					fontSize: 26,
					// 字体颜色
					color: '#313131',
					// 激活字体颜色
					activeColor: '#e54d42',
					// item宽度 0为自动
					itemWidth: 0,
					// 下划线左右边距，文字宽度加边距，如果设置了itemWidth则为itemWidth加边距 px
					underLinePadding: 10,
					// 下划线宽度 px  注意：设置了此值 underLinePadding 失效
					underLineWidth: 0,
					// 下划线高度 px
					underLineHeight: 4,
					// 下划线颜色
					underLineColor: '#e54d42',
				},
			}
		},
			methods: {
				search(res) {
					uni.showToast({
						title: '搜索：' + res.value,
						icon: 'none'
					})
				},
				input(res) {
					this.searchVal = res.value
				},
				cancel(res) {
					uni.showToast({
						title: '点击取消，输入值为：' + res.value,
						icon: 'none'
					})
				},
				tabClick(index, name) {
					// 点击的index
					this.selected = index;
				},
				pageTo(url) {
					console.log(url);
					uni.navigateTo({
						url: url
					})
				}
			},
			onBackPress() {
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
			}
		}
	
</script>

<style>
	.searchBar_ {
		margin-top: 40px;
	}

	.section1-image>image,
	.image-box>image {
		width: 100%;
	}

	.hot h4 {
		padding: 20px 15px;
	}

	.hot ul {
		padding-left: 45px;
		list-style-type: disc;
	}

	.hot ul li {
		margin-bottom: 10px;
		color: #505050;
	}

	.title {
		font-weight: 800;
		margin: 10px 20px 10px 12px;
	}

	.title2 {
		font-weight: 800;
		margin: 0px 20px 10px 12px;
		line-height: 50px;
	}

	.title text,
	.title2 text {
		margin-left: 10px;
	}

	.devider {
		height: 10px;
		background-color: #F2F4F8;
	}

	.devider-lg {
		height: 50px;
	}

	.content-box1 {
		padding-top: 10px;
	}

	.content-box1 text {
		font-size: 18px;
		font-weight: 600;
	}


	.content-box2,
	.content-box3 {
		padding-top: 15px;
	}

	.content-box2 text {
		font-size: 14px;
	}


	.content-box3 text {
		color: #ccc;
		font-size: 14px;
	}

	.picu {
		width: 100%;
		height: 55%;

	}

	.one {
		margin-top: 5%;
		height: 100%;
	}

	.picture {
		width: 43%;
		height: 170px;
		float: left;
		margin-left: 20px;


	}

	.Jclass {
		margin-left: 22px;
		margin-top: 10px;
		color: #808080;
	}
</style>
